<template>
  <div class="commentItem">
    <img v-lazy="item.user.avatarUrl + '?param=35y35'" alt="" />
    <div class="right">
      <div class="top">
        <span class="user" @click="userClick(item.user.userId)">{{ item.user.nickname }}:</span>
        <span class="content"> {{ item.content }}</span>
      </div>
      <!-- 被回复评论 -->
      <div class="center" v-for="(beRep, index1) in item.beReplied" :key="index1">
        <span class="user" @click="userClick(beRep.user.userId)">@{{ beRep.user.nickname }}:</span>
        <span class="content word"> {{ beRep.content }}</span>
      </div>
      <div class="bottom">
        <div class="time">{{ item.timeStr }}</div>
        <div class="icon">
          <i title="点赞" class="iconfont icon-dianzan" v-if="!item.liked" @click="dianzanComment(item.commentId, item.liked, index)"></i>
          <i title="取消点赞" class="iconfont icon-dianzan_kuai" v-else @click="dianzanComment(item.commentId, item.liked, index)"></i>
          <span>{{ item.likedCount }}</span>
          <i class="iconfont icon-fenxiang"></i>
          <i title="回复" class="iconfont icon-pinglun" @click="huifuComment(item.commentId, item.user.nickname)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item', 'index'],
  inject: ['replyClick', 'closeCardClick'],
  data() {
    return {};
  },
  computed: {},
  created() {},
  components: {},
  methods: {
    //回复评论
    huifuComment(cid, name) {
      if (!this.$store.state.state.isLogin) return this.$message.error('需要登录');
      this.replyClick(cid, name);
    },
    //评论点赞
    dianzanComment(cid, liked, index) {
      if (!this.$store.state.state.isLogin) return this.$message.error('需要登录');
      this.$emit('likeComment', cid, liked, index);
    },
    //用户点击
    userClick(id) {
      //关闭当前卡片
      this.closeCardClick();
      this.$router.replace('/userdetail/' + id).catch((err) => {});
    },
  },
};
</script>

<style scoped lang='scss'>
.commentItem {
  display: flex;
  padding: 15px 0;
  border-bottom: solid 1px $gray;
  img {
    @include image(35px, 50%);
  }
  .right {
    width: 100%;
    margin-left: 10px;
    font-size: 12px;
    .top {
      margin-bottom: 7px;
    }
    .center {
      background-color: $gray;
      border-radius: 7px;
      padding: 7px;
      margin-bottom: 7px;
      .word {
        color: #666;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .time {
        color: #919191;
      }
      .icon {
        width: 20%;
        display: flex;
        justify-content: space-between;
        .iconfont {
          cursor: pointer;
        }
        .icon-dianzan_kuai {
          color: $themeColor;
        }
      }
    }
  }
}
// common
.user {
  color: $userBlue;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  &:hover {
    color: $userHover;
  }
}
.content {
  /* 解决非文字文本不自动换行的问题 */
  word-break: break-all;
  word-wrap: break-word;
}
</style>